<template>
<div class="mainCon">
     <div class='stockContainer'>
       <div class="headerSection">
         <split-vertical title="库存统计"></split-vertical>
         <v-form :formProps="searchForm" ref="form"
                 v-on:handleReset="handleReset"
                 v-on:coverFormData="coverFormData">
         </v-form>
       </div>
       <div class="stand">
         <div style="line-height:50px;margin-left:10px;">
           <v-button :operationBtnArray="operationBtnArray" v-on:handleSearchTopBtn="handleSearchTopBtn"></v-button>
         </div>
         <div style="margin:0 10px;">
           <v-table :tableParams="tableParams" v-on:handleOperation="handleOperation"></v-table>
         </div>
       </div>
     </div>
        <div class="block">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="pageIndex"
                :page-sizes="[10]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageCount">
            </el-pagination>
        </div>
        <!--弹框 -->
        <add-stock @closeDialog="closeDialog" v-if="show" ></add-stock>
        <update-stock @closeDialog="closeDialog" v-if="showTip"  :modifydepotData="modifydepotData"></update-stock>
</div>
</template>
<script>
import VTable from "components/common/PageTable/VTable"
import addStock from "components/base/Stock/AddStock"
import updateStock from "components/base/Stock/UpdateStock"
import {localStorage} from "js/localStorage"
import axios from 'axios'
import SplitVertical from "components/common/SplitVertical"
import VForm from "components/common/VForm"
import VButton from "components/common/VButton"
export default{
    data(){
        return{
            searchCondition:{},
            // v-model
            productCode:'',
            productSkuName:'',
            depotId:'',
            depotData:[],
            //分页
            pageCount:null,
            pageIndex:1,
            pageSize:10,
            //弹框的显示
            show:false,
            showTip:false,
            hide:true,
            modifydepotData:{},
            id:'',
            searchForm: {
              col: 3,
              labelWidth: '100px',
              submitBtn: {
                text: '搜索'
              },
              formItemArray: [{
                label: '商品sku名称',
                prop: 'productSkuName',
                placeholder: "请输入",
                value: ''
              },{
                label: '商品货号',
                prop: 'productCode',
                placeholder: "请选择",
                value: ''
              }, {
                label: '选择仓库',
                prop: 'depotId',
                placeholder: "请选择",
                itemType: 'select',
                options:  [],
                value: ''
              }]
            },
            operationBtnArray: [{
            text: '刷新',
            icon:'el-icon-refresh',
            show: true,
            type: 'primary',
            methodName: 'refresh',
          }, {
            text: '新增',
            show: true,
            icon:'el-icon-plus',
            type: 'success',
            methodName: 'add',
          },
            {
                text: '导出',
                icon:'el-icon-download',
                show: true,
                type: 'warning',
                methodName: 'export',
            }],
            tableParams:{
                dataArray:[],
                showMultiSelection:false,
                columnArray:[
                    {label: '商品货号', prop: 'productCode',  sortable: false,width:'100'},
                    {label: '商品sku名称', prop: 'productSkuName',  sortable: false},
                    {label: '商品数量', prop: 'productNum',  sortable: false,width:'100'},
                    {label: '残次品数量', prop: 'productNo',sortable: false,width:'120'},
                    {label: '仓库名称', prop: 'depotName',sortable: false,width:'150'},
                    {label: '备注', prop: 'storage',sortable: false,width:'100'},
                    {label: '录入人',prop: 'userName',sortable: false,width:'100'},
                ],
                rowHandle:{
                    view:{
                        show:false
                    },
                }
            },
        }
    },
    created(){
        this.init()
    },
    methods: {
        init(){
            this.storageList()
            this.getDepotData()
            this.userId=localStorage.get('userID')

        },
        handleSearchTopBtn(methodName) {
          if (methodName === "refresh") {
            this.reStock();
          } else if(methodName == "add"){
            this.createStock();
          }else{
            this.exportExcel()
          }
        },
        handleReset(formName) {
          this.$refs.form.resetForm(formName);
        },
        coverFormData(data) {
          this.searchCondition = data;
          this.queryStock()
        },
        handleOperation(rowIndex, row, methodName) {
            this.id=row.id
            if(methodName == "update"){
                this.showTip=true
                this.editDepotState()
            }else if(methodName == "delete"){
                this.delStorageRecode()
            }
        },
        //导出库存excel
        exportExcel(){
            this.$confirm('此操作导出库存,是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            axios({
                    method:'post',
                    url: '/api/erp/v1/depot/storage/excel',
                    responseType: 'blob',
                    data:{
                        productSkuName:this.productSkuName,
                        productCode:this.productCode,
                        depotId:this.depotId
                    }
                }).then(res => {
                    if(res.status == "200"){
                        const link = document.createElement('a')
                        let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
                        link.style.display = 'none'
                        link.href = URL.createObjectURL(blob);
                        link.setAttribute('download', '库存表' + '.xlsx')
                        document.body.appendChild(link)
                        link.click()
                        document.body.removeChild(link)
                    }else{
                        this.$message.error("数据错误")
                    }
                }).catch(error => {
                })
            });
        },
        getDepotData(){
            let parmas={
                pageIndex:1,
                pageSize:10,
            }
            let success=data=>{
                if(data.code=='OK'){
                  this.searchForm.formItemArray.forEach(item => {
                    if (item.prop === 'depotId') {
                      item.options = this.buildExceptKeyAndValue(data.data, "depotName", "id", "label", "value");
                    }
                  })
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.depotList(parmas,success)
        },
        storageList(){
            let parmas={
                pageIndex:1,
                pageSize:10
            }
            let success=data=>{
                if(data.code=="OK"){
                    this.tableParams.dataArray=data.data
                    this.pageCount=data.pageCount
                }else{
                    this.$message.error(data.msg)
                }
            }
            this.api.depotStorageList(parmas,success)
        },
        //库存查询接口
        queryStock( ){
          let param = this.searchCondition;
          if (!param.pageIndex || !param.pageSize) {
            param['pageIndex'] = this.pageIndex;
            param['pageSize'] = this.pageSize;
          }
          let success = data => {
            if (data.code === 'OK') {
              this.pageCount = data.pageCount;
              this.tableParams.dataArray=data.data
            } else {
              this.$message.error(data.msg);
            }
          };
           this.api.depotStorageList(param,success)
        },
        //重置按钮
        reset(){
          this.productCode="",
          this.productSkuName="",
          this.depotId=""
        },
        //页码
        handleCurrentChange(val) {
          this.searchCondition['pageIndex'] = val;
          this.queryStock()
        },
        //新增弹框
        createStock(){
           this.show=true
        },
        //刷新库存列表
        reStock(){
           this.storageList()
        },
        //关闭弹窗
        closeDialog(){
            this.show=false;
            this.showTip=false;
        },
        //通过id修改库存数据
        editDepotState(){
            this.showTip=true;
            let parmas={
                id:this.id
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.modifydepotData=data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
           this.api.depotStorageGetOne(parmas,success)
        },
        //删除列表记录
        delStorageRecode(){
            this.$confirm('是否删除该消息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
            }).then(() => {
                //删除商品信息
                let parmas={
                    id:this.id
                }
                let success=data=>{
                    if(data.code=='OK'){
                        this.storageList()
                        this.$message.success("删除成功")
                    }else{
                        this.$message.error(data.msg)
                    }
                }
                this.api.depotStorageDelete(parmas,success)
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    },
    components: {
        addStock, updateStock, VTable,VForm, VButton, SplitVertical
    }
}
</script>

<style lang="scss" scoped>
.mainCon{
    .stockContainer{
      .headerSection{
        background:#fff;
        height:140px;
        padding:0 10px;
        border-left: 2px solid #e8e8e8;
        border-right: 2px solid #e8e8e8;
        border-bottom: 2px solid #e8e8e8;
      }
    }
  .block{
    padding:10px 0;
    text-align: right;
  }
}

</style>
